<template>
	<view class="">
		<view class="top">
			<uni-easyinput class="uni-mt-5" suffixIcon="search" v-model="info.keyword" placeholder="请输入姓名"
				placeholderStyle="font-size:30rpx" @iconClick="iconClick"></uni-easyinput>
		</view>
		<view class="center">
			<view class="title">{{info.department}}人员档案 <text>{{total}}</text> </view>
			<uni-list :border="false">
				<view class="list-card" v-for="(item,index) in showList" :key="index" @click="clickCard(item._id)" >
					<view class="left">
						<image class="image" :src="item.photo"></image>
					</view>
					<view class="right">
						<view class="name">
							{{item.name}}
							<view class="box">{{ item.department}}</view>
						</view>
						<view class="num">
							工号：{{item.code}}
						</view>
					</view>
				</view>
				<xbd-null-list v-if="!showList.length"></xbd-null-list>
				<xbd-loading-more v-if="showList.length" :status-num="statusNum" :is-load-more="isLoadMore">
				</xbd-loading-more>
			</uni-list>
			
		</view>
	</view>
</template>

<script>
	import {
		Supervision
	} from '@/api/index.js';
	export default {
		data() {
			return {
				total:0,
				statusNum: 0,
				isLoadMore: false,
				info:{
					page:1,
					perpage:10,
					department:'',
					keyword:''
				},
				showList:[]
			};
		},
		methods: {
			iconClick() {
				this.info.page = 1
				console.log('就是玩')
				this.init()
			},
			clickCard(id) {
				console.log(id,'id')
				uni.navigateTo({
					url: `/pages/supervision/archives/appoint?id=${id}`,
				});
			},
			async init(){
				const res = await Supervision.getRecordList(this.info)
				if (res.data.list.length === this.info.perpage) {
					this.isLoadMore = true;
					this.statusNum = 2;
				}
				this.showList = res.data.list
				this.total = res.data.total
				console.log(res,'res')
			},
			// 加载更多
			loadmore() {
				this.info.page++;
				this.statusNum = 1;
				this.isLoadMore = true;
				this.loadmoreList();
			},
			async loadmoreList() {
				try {
					const res = await Supervision.getRecordList(this.info);
					if (res.data.list.length) {
						this.showList = this.showList.concat(res.data.list);
						if (res.data.list.length === this.info.perpage) {
							this.statusNum = 2;
						} else {
							this.statusNum = 0;
						}
						// this.isLoadMore = false;
					} else {
						this.info.page--;
						this.statusNum = 0;
					}
				} catch (e) {
					uni.hideLoading();
					this.info.page--;
				}
			},
		},
		async onLoad(res) {
			this.info.page=1;
			uni.pageScrollTo({
			    scrollTop: 0,
			});
			console.log(res)
			this.info.department= res.name
			this.init()
		},
		// 触底触发
		onReachBottom() {
			// 当下拉组件显示状态 并且显示不是没有数据了 时才进行下拉加载
			console.log('触底操作')
			if (this.isLoadMore && this.statusNum !== 0) {
				this.loadmore();
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-icons {
		margin-right: 20rpx;
	}

	::v-deep .uni-easyinput__content-input {
		font-size: 30rpx;
	}
	::v-deep .uni-list {
		background-color: transparent !important;
	}
	::v-deep .uni-easyinput__content {
		height: 72rpx !important;
	}
	.top {
		// position: fixed;
		background-color: #FFFFFF;
		padding: 32rpx 20rpx;
	}

	.center {
		padding: 32rpx;

		.title {
			color: 30rpx;
			color: #2E73FC;
			font-weight: 400;
			margin-bottom: 32rpx;

			text {
				font-size: 40rpx;
				margin-left: 20rpx;
			}
		}

		.list-card {
			box-sizing: border-box;
			background-color: #FFFFFF;
			display: flex;
			align-items: center;
			padding: 32rpx;
			border-radius: 12rpx;
			margin-bottom: 32rpx;

			.left {
				margin-right: 30rpx;

				.image {
					width: 100rpx;
					height: 100rpx;
				}
			}

			.right {
				.name {
					display: flex;
					align-items: center;
					font-size: 34rpx;
					font-weight: 400;
					color: #000623;
					margin-bottom: 14rpx;

					.box {
						flex-shrink: 0 ;
						height: 36rpx;
						box-sizing: border-box;
						font-size: 22rpx;
						padding: 2rpx 10rpx;
						margin-left: 20rpx;
						color: #2E73FC;
						border: 2rpx solid #2E73FC;
						border-radius: 18rpx;
					}
				}

				.num {
					font-size: 28rpx;
					color: #8890A5;
				}
			}

		}
	}
</style>
